import React from 'react'
import styles from './styles/selector'
import cx from 'classnames'
import {findDOMNode} from "react-dom";

export default React.createClass({

    getInitialState: function() {
        return {
            errMsg: null,
            value: this.props.value || '',
        };
    },

    propTypes: {
        options: React.PropTypes.node,
        onChange: React.PropTypes.func,
        value: React.PropTypes.string,
        name: React.PropTypes.string
    },

    onChange: function(e){
        this.setState({value: e.target.value});
        let value = e.target.value;
        if(this.props.onChange && typeof this.props.onChange === "function"){
            if (this.props.name.indexOf('filed' > -1)) {
                this.props.onChange(value, this.props.name);
            }else {
                this.props.onChange(value);
            }
        };
    },

    render: function() {
        let options = this.props.options;
        if(!options) options = (<option value="-1">请选择</option>)
        return (
            <div className={cx("select-cmp",this.props.className)}>
                <select ref="select" onChange={this.onChange} value={this.state.value}>
                    {options}
                </select>
            </div>
        );
    },

    getValue: function(){
        return findDOMNode(this.refs.select).value;
    },

    clear: function() {
        this.setState({value: ''});
    }
})
